import React, { Component } from 'react'
import './styles/App'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'

export default class App extends Component {
  state = { list: [] }
  addItem = (item) => {
    this.setState({
      list: [item, ...this.state.list]
    })
  }
  deleteItem = (id) => {
    const filters = this.state.list.filter(item => item.id !== id);
    this.setState({ list: filters })
  }
  changeStatus = (id) => {
    let list = [...this.state.list];
    list.map(item => {
      if (item.id == id) {
        item.done = !item.done;
      }
    })

    this.setState({ list: list });
  }
  changeAllStatus = (checked) => {
    // 列表为空时
    if (!this.state.list.length) {
      return false;
    }
    let list = [...this.state.list];
    list.map(item => item.done = checked);
    this.setState({ list: list });
  }
  deleteAllDone = () => {
    if (!this.state.list.length) {
      return false;
    }
    const list = this.state.list.filter(item => item.done !== true);
    this.setState({ list })
  }
  render() {
    return (
      <div className='box'>
        <Header addItem={this.addItem} />
        <List list={this.state.list} deleteItem={this.deleteItem} changeStatus={this.changeStatus} />
        <Footer list={this.state.list} changeAllStatus={this.changeAllStatus} deleteAllDone={this.deleteAllDone} />
      </div>
    )
  }
}
